{% extends 'base_backend.html' %}
{% load static %}
{% load my_filter %}

{% block header_tail %}
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/style.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/zhongbao_admin/css/iconfont.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'public/ComboSelect/css/combo.select.css' %}">
<link rel="stylesheet" href="{% static 'zhongbao/config/css/main.css' %}">
<style>
    tr {
        height: 20px !important;
    }
    th, td{
        border:1px solid black !important;
        text-align: center;
        padding: 0px !important;
    }
</style>

<script src="{% static 'plugins\jQuery\jquery-2.2.3.min.js' %}"></script>
<script src="{% static 'plugins/vue1/vue.js' %}"></script>

{% endblock header_tail %}

{% block section_content %}
    <div class="box-header with-border">
    <h3 class="box-title">会员等级</h3>
    </div>
    <div class="row">
        <div class="col-md-6" style="display: flex;justify-content: space-around;padding-top: 20px;">
            <div style="width: 50%;display: flex;justify-content: left;padding-top: 11px;">
                <div ><strong>{{ level_name }}</strong></div>
                <div class="progress" style="width: 100%;margin: 0 0 0 20px;">
                    <div class="progress-bar progress-bar-aqua" role="progressbar" aria-valuenow="20" aria-valuemin="0"
                         aria-valuemax="100" style="width: {% widthratio empirical_value empirical_end 100 %}%;color: black;">
                        {{ empirical_value }}/{{ empirical_end }}
                    </div>
                </div>
            </div>
            <a href="{% url 'zhongbao_admin:receive_bonus' %}" class="btn btn-block btn-primary btn-sm" style="width: 20%;">领取奖励</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6" style="padding-top: 20px;">
            <div class="box box-primary">
                <!-- /.box-header -->
                <div class="box-body">
                    <blockquote style="padding: 10px 20px;">
                        <p>等级介绍</p>
                    </blockquote>
                </div>
                <div class="box-body" style="padding-left: 40px;">
                    <dl>
                        <dt>如何体升等级</dt>
                        <dd> 1.用户可通过领取实战任务提升等级。</dd>
                        <dd> 2.任务为“实战任务”，以完成任务个数来升等级。</dd>
                        <dt>等级规则有哪些</dt>
                        <dd> 1.必须本账号实际完成的任务数。</dd>
                        <dd> 2.新手任务不参与等级提升。</dd>
                        <dd> 3.任务未审核、审核未通过的都不计入完成任务内。</dd>
                        <dt>等级提升有何用处</dt>
                        <dd> 1.用户每达到一个等级便可领取奖励。</dd>
                    </dl>
                </div>
                <div class="box-body">
                    <blockquote style="padding: 10px 20px;">
                        <p>等级对照表</p>
                    </blockquote>
                </div>
                <div class="box-body">
                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <th style="width: 80px">用户等级</th>
                            <th>对应升级门槛(任务)</th>
                            <th>升等级奖励（赏金）</th>
                            <th>等级单个任务赏金加成（赏金）</th>
                        </tr>
                        {% for level in all_level_info%}
                        <tr>
                            <td><img src="/static/{{ level.icon_src }}" alt=""></td>
                            <td>{{ level.start_source }}</td>
                            <td>{{ level.bonus }}</td>
                            <td>{{ level.addition }}%</td>
                        </tr>
                        {% endfor %}
                        <tr>
                            <td><img src="{% static 'public/img/user_level/ellipsis.svg' %}" alt=""></td>
                            <td><img src="{% static 'public/img/user_level/ellipsis.svg' %}" alt=""></td>
                            <td><img src="{% static 'public/img/user_level/ellipsis.svg' %}" alt=""></td>
                            <td><img src="{% static 'public/img/user_level/ellipsis.svg' %}" alt=""></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
<script>


    function changeColor(id, color) {
        //$(id).parent().parent().parent().children().children().children().find("li[color='green']");
        $(id).parent().parent().addClass("active");
        $(id).children().css("color", color);
    }

    $('#myTasks').addClass("active");
    changeColor("#account_level", "#00FF7F");
</script>
{% endblock section_content %}

